<template>
  <div class="workReport">
    <div class="searchDiv">
      <Form :model="searchItem" :label-width="80">
      <Row :gutter="10">
        <Col span="6">
            <FormItem label="所在部门">
              <Select v-model="searchItem.department">
                <Option value="1">技术部</Option>
                <Option value="2">市场部</Option>
            </Select>
            </FormItem>
        </Col>
        <Col span="6">
             <FormItem label="汇报人">
              <Input v-model="searchItem.reporter" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="时间段">
              <DatePicker type="daterange"  placeholder="Select date" v-model="searchItem.timearry" style="width: 100%"></DatePicker>
            </FormItem>
        </Col>
        <Col span="6">
            <Button type="primary" class="chaxun">查询</Button>
            <Button type="success" class="chaxun" @click="add">新增周报</Button>
            <Button type="success">导出Excel</Button>
        </Col>
       </Row>
      </Form>
    </div>
    <Table border :columns="columns" :data="tableData"></Table>
    <Modal :mask-closable="false" v-model="modal2" width="360" class-name="vertical-center-modal" @on-ok="remove(delIndex)">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>确认删除</span>
        </p>
        <div style="text-align:center">
            <p>确认删除此数据么？</p>
        </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      delIndex: 0,
      modal2: false,
      searchItem: {
        department: '',
        reporter: '',
        timearry: []
      },
      formItem: {

      },
      columns: [
        {
          type: 'index',
          width: 60,
          title: '序号',
          align: 'center'
        },
        {
          title: '时间段',
          key: 'timearry'
        },
        {
          title: '部门',
          key: 'department'
        },
        {
          title: '汇报人',
          key: 'reporter'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.openDel(params.index)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableData: [
        {
          timearry: '2019-05-12 - 2019-11-03',
          reporter: '李小明',
          department: '综合管理部'
        },
        {
          timearry: '2019-05-12 - 2019-11-03',
          reporter: '李小明',
          department: '综合管理部'
        }
      ]
    }
  },
  methods: {
    openDel (index) {
      this.modal2 = true
      this.delIndex = index
    },
    remove (index) {
      this.tableData.splice(index, 1)
    },
    add () {

    },
    edit (params) {

    },
    ok () {
      this.$Message.info('提交成功')
    }
  },
  mounted () {}
}
</script>

<style lang="less">
.workReport {
  background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .searchDiv {
    .chaxun {
      margin-right: 15px;
    }
  }
}
.sbsq {
  font-size:15px;
  padding-bottom:10px;
}

</style>
